<!--  -->
<template>
  <div class="container">
    <Nav title="添加支付方式">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
    </Nav>
    <div class="addbankcard_con">
      <div class="addbankcard_con_item show_public flex flex-column justify-center">
        <span class="f-15 ml-10">账号</span>
        <cube-input v-model="number" placeholder="输入你的账号" clearable></cube-input>
        <cube-validator ref="number" v-model="valid[0]" :model="number" :rules="commonRules"></cube-validator>
      </div>
      <div
        class="addbankcard_con_item show_public flex flex-column justify-center"
        @click="show =true"
      >
        <span class="f-15 ml-10">账号类型</span>
        <div class="color-gray ml-10 mt-10">{{accountType}}</div>
      </div>
      <div class="addbankcard_con_item show_public flex flex-column justify-center">
        <span class="f-15 ml-10">姓名</span>
        <cube-input v-model="name" placeholder="输入您的姓名" clearable></cube-input>
        <cube-validator ref="name" v-model="valid[1]" :model="name" :rules="commonRules"></cube-validator>
      </div>
      <div class="addbankcard_con_item show_public flex flex-column justify-center">
        <span class="f-15 ml-10">手机号</span>
        <cube-input v-model="mobile" placeholder="输入您的手机号" clearable type="number"></cube-input>
        <cube-validator ref="mobile" v-model="valid[2]" :model="mobile" :rules="rules"></cube-validator>
      </div>
        <!-- 默认地址 -->
      <div class="addressadd_item flex justify-between aligin-center">
        <span class="f-14">默认</span>
        <cube-switch v-model="isDefault" class="address_default"></cube-switch>
      </div>
    </div>
    <div class="addbankcard_foot">
      <button class="addbankcard_btn btn_public" @click="confirm">确定</button>
    </div>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect"/>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import { withdrawBind } from "../../api/api";
export default {
  components: { Nav },
  data() {
    return {
      show: false,
      accountType: "支付宝",
      actions: [
        { name: "支付宝" }
      ],
      isDefault:true,
      name: "",
      number: "",
      mobile:"",
      valid: [undefined, undefined, undefined],
      rules: {
        required: true,
        type: "tel"
      },
      commonRules: {
        required: true
      }
    };
  },
  computed: {},
  watch: {},
  methods: {
    onSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.show = false;
      this.accountType = item.name;
    },
    // 提交
    confirm() {

      const number = this.$refs.number.validate();
      const name = this.$refs.name.validate();
      const mobile = this.$refs.mobile.validate();

      Promise.all([name, mobile, number]).then(() => {
        if (this.valid.every(item => item)) {
          withdrawBind({
            bank_type: this.accountType == "支付宝" ? 2 : 1,
            realname: this.name,
            account_number: this.number,
            mobile:this.mobile,
            is_default:this.isDefault?1:0
          }).then(res => {
            this.$router.back();
          });
        }
      });
    }
  },
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../../assets/style/mixin.less");
//@import url(); 引入公共css类
.container /deep/ .cube-validator-msg {
  text-indent: 10px;
}
.addbankcard_head {
  height: 50px;
}

.addbankcard_con_item {
  height: 80px;
  padding: 0 16px;
}
.addbankcard_con_item input {
  font-size: 13px;
  color: #bcbcbc;
  padding-top: 15px;
}
.addbankcard_foot {
  margin: 15px;
}
.addressadd_item {
  margin-left: 14px;
  padding: 0 22px 0 8px;
  height: 55px;
}
.addressadd_item
  /deep/
  .cube-switch
  .cube-switch-input:checked
  + .cube-switch-ui {
  background-color: #49df00;
  border-color: #49df00;
}
</style>